<template>
  <div class="info">
    <!-- 待配送 -->
    <div v-if="goodslist.status === 1">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="overTime">预计到达时间:12:00</div>
      </div>
      <div class="order-right">
        <div>待配送</div>
        <van-button type="danger" size="samll" round @click="refund">申请退款</van-button>
      </div>
    </div>
    <!-- 待支付 -->
    <div v-else-if="goodslist.status === 0">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="cancelTime">
          <van-count-down :time="time" @finish="finish">
            <template #default="timeData">
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          <div class="beforTiemText">后取消订单</div>
        </div>
      </div>
      <div class="order-right">
        <div>待支付</div>
        <van-button type="danger" size="samll" round @click="cancelOrder">取消订单</van-button>
      </div>
    </div>
    <!-- 待自提 -->
    <div v-else-if="goodslist.status === 2">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="overTime">自提时间段: 每日8:00至21:00</div>
      </div>
      <div class="order-right">
        <div>待自提</div>
        <van-button type="danger" size="samll" round @click="refund">申请退款</van-button>
      </div>
    </div>
    <!-- 待配送 -->
    <div v-else-if="goodslist.status === 3">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="overTime">自提时间段: 每日8:00至21:00</div>
      </div>
      <div class="order-right">
        <div>已收货</div>
      </div>
    </div>
    <!-- 退款 -->
    <div v-else-if="goodslist.status === 4">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="overTime">自提时间段: 每日8:00至21:00</div>
      </div>
      <div class="order-right">
        <div>申请退款</div>
      </div>
    </div>
    <!-- 已退款 -->
    <div v-else-if="goodslist.status === 5">
      <div class="order-left">
        订单号:{{ goodslist.id }}
        <div class="overTime">自提时间段: 每日8:00至21:00</div>
      </div>
      <div class="order-right">
        <div>已退款</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsInfo',
  props: {
    goodslist: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      time: 15 * 60 * 1000
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    cancelOrder () {
      this.$dialog.confirm({
        title: '取消订单',
        message: '你确定要取消该订单吗'
      })
        .then(() => {
          this.$parent.closePopupShow()
          this.$parent.confirmOrder()
        })
        .catch(() => {
          return false
        })
    },
    finish () {
      this.$toast('已取消订单')
      this.$parent.closePopupShow()
      this.$parent.confirmOrder()
    },
    refund () {
      this.$dialog.confirm({
        title: '申请退款',
        message: '你确定要申请退款吗(跳转至退款页面)'
      })
        .then(() => {
          //   this.$parent.closePopupShow()
          this.$emit('to_refund', 4)
        })
        .catch(() => {
          return false
        })
    }
  }
}
</script>

<style scoped lang="less">
.info {
  .order-left {
    float: left;
    font-size: 25px;
    box-sizing: border-box;
    .overTime {
      margin-top: 15px;
      font-weight: 700;
      font-size: 30px;
      box-sizing: border-box;
    }
    .cancelTime {
      margin-top: 20px;
      font-weight: 700;
      .van-count-down {
        float: left;
        .colon {
          display: inline-block;
          margin: 0 8px;
          color: #ee0a24;
        }
        .block {
          display: inline-block;
          width: 44px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #ee0a24;
        }
      }
      .beforTiemText {
        margin-left: 15px;
        float: left;
      }
    }
  }
  .order-right {
    text-align: right;
    font-size: 25px;
    float: right;
    .van-button {
      font-size: 25px;
      width: 170px;
      height: 50px;
      margin-top: 10px;
    }
  }
}
</style>
